<template>
  <div id="index">
  	<!---------home_1------------>
  	<div class="home_1">
  		<div class="navList">
				<router-link v-for="item in navList" :to='{path:"/home/good",query:item.query}' exact>
					<img :src="item.Src" />
					<p>{{item.name}}</p>
				</router-link>
			</div>
			<div id="banner">
				<swiper :options="swiperOption">
		　　　　<swiper-slide v-for="item in imgList">
		　　　　　　<img :src="item.imgPath"/>
		　　　　</swiper-slide>
		　　　　<div class="swiper-pagination" slot="pagination"></div>
			　　</swiper>
					<div class="swiper-button-prev swiper-button-white"></div><!--左箭头-->
			    <div class="swiper-button-next swiper-button-white"></div><!--右箭头-->
			</div>
			<div id="notice">
				<div class="notice">
					<p class="home_1_title">官方公告</p>
					<ul v-if="noticeList.length>0">
						<li @click="toNotice(key)" v-for="(item,key) in noticeList.slice(0,3)"><span></span><p>{{item.noticeTitle}}</p></li>
						<!--<li><span></span><p>官方公告，这是内容</p></li>
						<li><span></span><p>官方公告，这是内容</p></li>-->
					</ul>
				</div>
				<div class="tologin">
					<router-link to="/IDoperation/login">
						<img src="../../static/img/home-11.png"/>
						<p>登录</p>
					</router-link>
					<router-link to="/IDoperation/register">
						<img src="../../static/img/home-12.png"/>
						<p>注册</p>
					</router-link>
				</div>
				<p class="home_1_title">赶紧试小助手</p>
				<div class="helper">
					<router-link class="helper_item" to="/joinAgent">
						<img src="../../static/img/home-13.png"/>
						<p>商家报名</p>
					</router-link>
					<router-link class="helper_item" to="/home/good">
						<img src="../../static/img/home-14.png"/>
						<p>精选好货</p>
					</router-link>
					<router-link class="helper_item" to="/share">
						<img src="../../static/img/home-15.png"/>
						<p>邀请好友</p>
					</router-link>
					<router-link class="helper_item" to="/agent">
						<img src="../../static/img/home-16.png"/>
						<p>商家中心</p>
					</router-link>
				</div>
			</div>
  	</div>
  	<!---------home_2------------>
  	<div class="home_2">
  		<div class="home_2_item">
  			<img src="../../static/img/home-17.png"/>
  			<div>
  				<p>已有<span>{{count1}}</span></p>
  				<p>个试用商家入驻</p>
  			</div>
  		</div>
  		<div class="home_2_item">
  			<img src="../../static/img/home-18.png"/>
  			<div>
  				<p>已有<span>{{count2}}</span></p>
  				<p>件试用品在线</p>
  			</div>
  		</div>
  		<div class="home_2_item">
  			<img src="../../static/img/home-19.png"/>
  			<div>
  				<p>已有<span>{{count3}}</span></p>
  				<p>位用户领到试用品</p>
  			</div>
  		</div>
  		<div class="home_2_item">
  			<img src="../../static/img/home-20.png"/>
  			<div>
  				<p>已有<span>{{count4}}</span></p>
  				<p>个试用在赶紧试发布</p>
  			</div>
  		</div>
  		<div class="home_2_item">
  			<img src="../../static/img/home-25.png"/>
  			<div>
  				<p>已有<span>{{count6}}</span></p>
  				<p>位活跃用户</p>
  			</div>
  		</div>
  	</div>
  	<!-------home_3------------>
  	<div class="home_3">
  		<!-----------今日新品------------>
  		<div v-if="taskList1.length == 5" class="home_3_title">
  			<div class="title_l">
  				<p><span></span>今日新品</p>
  				<p><!--今日上新{{count5}}件好货--></p>
  			</div>
  			<div class="title_r">
  				<router-link to="/home/good">查看更多</router-link>
  			</div>
  		</div>
  		<!-------------任务 5个装--------------->
  		<div v-if="taskList1.length == 5" class="task_box_10">
  			<div @click="applyTask(item.id)" v-for="item in taskList1.slice(0,5)" class="task_item">
  				<div class="goods_img">
  					<img src="../../static/img/imgLoading.png"/>
  					<div class="img_box">
  						<img :src="item.goodsImage"/>
  					</div>
  				</div>
  				<div class="task_title">
  					<img :src="getPaltformImg(item.paltform)"/>
  					<p>{{item.taskName}}</p>
  				</div>
					<div class="price">
						<p>¥{{item.price}}</p>
						<!--<p>已有{{item.applyNum}}人申请</p>-->
					</div>
					<input type="button" value="免费试用"/>
  			</div>
  		</div>
  		<!-----------推荐好货-------------->
  		<div class="home_3_title">
  			<div class="title_l">
  				<p><span></span>推荐好货</p>
  				<p>每天都有惊喜！</p>
  			</div>
  			<div class="title_r">
  				<router-link to="/home/good">查看更多</router-link>
  			</div>
  		</div>
  		<!-------------任务 10个装--------------->
  		<div class="task_box_10">
  			<div @click="applyTask(item.id)" v-for="item in taskList2.slice(0,taskNum)" class="task_item">
  				<div class="goods_img">
  					<img src="../../static/img/imgLoading.png"/>
  					<div class="img_box">
  						<img :src="item.goodsImage"/>
  					</div>
  				</div>
  				<div class="task_title">
  					<img :src="getPaltformImg(item.paltform)"/>
  					<p>{{item.taskName}}</p>
  				</div>
					<div class="price">
						<p>¥{{item.price}}</p>
						<!--<p>已有{{item.applyNum}}人申请</p>-->
					</div>
					<input type="button" value="免费试用"/>
  			</div>
  		</div>
  		<!--------------任务 8个装-------------------->
  		<!-------潮流女装--------->
  		<div v-show="taskList3.length > 4" class="home_3_item">
  			<div class="task_classify" @click="toGoodtype('女装')">
  				<img src="../../static/img/classify-01.jpg"/>
  				<div class="shade">
  					<img src="../../static/img/classify-09.png"/>
  				</div>
  			</div>
  			<div class="task_box_8">
  				<div @click="applyTask(item.id)" v-for="item in taskList3.slice(0,8)" class="task_item">
	  				<div class="goods_img">
	  					<img src="../../static/img/imgLoading.png"/>
	  					<div class="img_box">
	  						<img :src="item.goodsImage"/>
	  					</div>
	  				</div>
	  				<div class="task_title">
	  					<img :src="getPaltformImg(item.paltform)"/>
	  					<p>{{item.taskName}}</p>
	  				</div>
						<div class="price">
							<p>¥{{item.price}}</p>
							<!--<p>已有{{item.applyNum}}人申请</p>-->
						</div>
						<input type="button" value="免费试用"/>
	  			</div>
  			</div>
  		</div>
  		<div v-show="taskList4.length > 4" class="home_3_item">
  			<div class="task_classify" @click="toGoodtype('男装')">
  				<img src="../../static/img/classify-02.jpg"/>
  				<div class="shade">
  					<img src="../../static/img/classify-09.png"/>
  				</div>
  			</div>
  			<div class="task_box_8">
  				<div @click="applyTask(item.id)" v-for="item in taskList4.slice(0,8)" class="task_item">
	  				<div class="goods_img">
	  					<img src="../../static/img/imgLoading.png"/>
	  					<div class="img_box">
	  						<img :src="item.goodsImage"/>
	  					</div>
	  				</div>
	  				<div class="task_title">
	  					<img :src="getPaltformImg(item.paltform)"/>
	  					<p>{{item.taskName}}</p>
	  				</div>
						<div class="price">
							<p>¥{{item.price}}</p>
							<!--<p>已有{{item.applyNum}}人申请</p>-->
						</div>
						<input type="button" value="免费试用"/>
	  			</div>
  			</div>
  		</div>
  		<div v-show="taskList5.length > 4" class="home_3_item">
  			<div class="task_classify" @click="toGoodtype('鞋包')">
  				<img src="../../static/img/classify-03.jpg"/>
  				<div class="shade">
  					<img src="../../static/img/classify-09.png"/>
  				</div>
  			</div>
  			<div class="task_box_8">
  				<div @click="applyTask(item.id)" v-for="item in taskList5.slice(0,8)" class="task_item">
	  				<div class="goods_img">
	  					<img src="../../static/img/imgLoading.png"/>
	  					<div class="img_box">
	  						<img :src="item.goodsImage"/>
	  					</div>
	  				</div>
	  				<div class="task_title">
	  					<img :src="getPaltformImg(item.paltform)"/>
	  					<p>{{item.taskName}}</p>
	  				</div>
						<div class="price">
							<p>¥{{item.price}}</p>
							<!--<p>已有{{item.applyNum}}人申请</p>-->
						</div>
						<input type="button" value="免费试用"/>
	  			</div>
  			</div>
  		</div>
  		<div v-show="taskList6.length > 4" class="home_3_item">
  			<div class="task_classify" @click="toGoodtype('电器')">
  				<img src="../../static/img/classify-04.jpg"/>
  				<div class="shade">
  					<img src="../../static/img/classify-09.png"/>
  				</div>
  			</div>
  			<div class="task_box_8">
  				<div @click="applyTask(item.id)" v-for="item in taskList6.slice(0,8)" class="task_item">
	  				<div class="goods_img">
	  					<img src="../../static/img/imgLoading.png"/>
	  					<div class="img_box">
	  						<img :src="item.goodsImage"/>
	  					</div>
	  				</div>
	  				<div class="task_title">
	  					<img :src="getPaltformImg(item.paltform)"/>
	  					<p>{{item.taskName}}</p>
	  				</div>
						<div class="price">
							<p>¥{{item.price}}</p>
							<!--<p>已有{{item.applyNum}}人申请</p>-->
						</div>
						<input type="button" value="免费试用"/>
	  			</div>
  			</div>
  		</div>
  		<div v-show="taskList7.length > 4" class="home_3_item">
  			<div class="task_classify" @click="toGoodtype('食品')">
  				<img src="../../static/img/classify-05.jpg"/>
  				<div class="shade">
  					<img src="../../static/img/classify-09.png"/>
  				</div>
  			</div>
  			<div class="task_box_8">
  				<div @click="applyTask(item.id)" v-for="item in taskList7.slice(0,8)" class="task_item">
	  				<div class="goods_img">
	  					<img src="../../static/img/imgLoading.png"/>
	  					<div class="img_box">
	  						<img :src="item.goodsImage"/>
	  					</div>
	  				</div>
	  				<div class="task_title">
	  					<img :src="getPaltformImg(item.paltform)"/>
	  					<p>{{item.taskName}}</p>
	  				</div>
						<div class="price">
							<p>¥{{item.price}}</p>
							<!--<p>已有{{item.applyNum}}人申请</p>-->
						</div>
						<input type="button" value="免费试用"/>
	  			</div>
  			</div>
  		</div>
  		<div v-show="taskList8.length > 4" class="home_3_item">
  			<div class="task_classify" @click="toGoodtype('家居')">
  				<img src="../../static/img/classify-06.jpg"/>
  				<div class="shade">
  					<img src="../../static/img/classify-09.png"/>
  				</div>
  			</div>
  			<div class="task_box_8">
  				<div @click="applyTask(item.id)" v-for="item in taskList8.slice(0,8)" class="task_item">
	  				<div class="goods_img">
	  					<img src="../../static/img/imgLoading.png"/>
	  					<div class="img_box">
	  						<img :src="item.goodsImage"/>
	  					</div>
	  				</div>
	  				<div class="task_title">
	  					<img :src="getPaltformImg(item.paltform)"/>
	  					<p>{{item.taskName}}</p>
	  				</div>
						<div class="price">
							<p>¥{{item.price}}</p>
							<!--<p>已有{{item.applyNum}}人申请</p>-->
						</div>
						<input type="button" value="免费试用"/>
	  			</div>
  			</div>
  		</div>
  		<div v-show="taskList9.length > 4" class="home_3_item">
  			<div class="task_classify" @click="toGoodtype('母婴')">
  				<img src="../../static/img/classify-07.jpg"/>
  				<div class="shade">
  					<img src="../../static/img/classify-09.png"/>
  				</div>
  			</div>
  			<div class="task_box_8">
  				<div @click="applyTask(item.id)" v-for="item in taskList9.slice(0,8)" class="task_item">
	  				<div class="goods_img">
	  					<img src="../../static/img/imgLoading.png"/>
	  					<div class="img_box">
	  						<img :src="item.goodsImage"/>
	  					</div>
	  				</div>
	  				<div class="task_title">
	  					<img :src="getPaltformImg(item.paltform)"/>
	  					<p>{{item.taskName}}</p>
	  				</div>
						<div class="price">
							<p>¥{{item.price}}</p>
							<!--<p>已有{{item.applyNum}}人申请</p>-->
						</div>
						<input type="button" value="免费试用"/>
	  			</div>
  			</div>
  		</div>
  		<div v-show="taskList10.length > 4" class="home_3_item">
  			<div class="task_classify" @click="toGoodtype('美妆')">
  				<img src="../../static/img/classify-08.jpg"/>
  				<div class="shade">
  					<img src="../../static/img/classify-09.png"/>
  				</div>
  			</div>
  			<div class="task_box_8">
  				<div @click="applyTask(item.id)" v-for="item in taskList10.slice(0,8)" class="task_item">
	  				<div class="goods_img">
	  					<img src="../../static/img/imgLoading.png"/>
	  					<div class="img_box">
	  						<img :src="item.goodsImage"/>
	  					</div>
	  				</div>
	  				<div class="task_title">
	  					<img :src="getPaltformImg(item.paltform)"/>
	  					<p>{{item.taskName}}</p>
	  				</div>
						<div class="price">
							<p>¥{{item.price}}</p>
							<!--<p>已有{{item.applyNum}}人申请</p>-->
						</div>
						<input type="button" value="免费试用"/>
	  			</div>
  			</div>
  		</div>
  	</div>
  	<div v-show="noticePop" id="noticePop" v-if="noticeList.length>0">
  		<div class="noticePop">
  			<p>平台公告</p>
  			<div class="notice_content">
  				<h3>{{noticeList[index].noticeTitle}}</h3>
  				<p class="notice_time">{{getDate(noticeList[index].createtime)}}</p>
  				<p class="notice_text">{{noticeList[index].content}}</p>
  			</div>
  			<input @click="noticePop = false" type="button" value="确认" />
  		</div>
  	</div>
  	<div v-show="guide" id="guide">
			<div class="guide">
				<img class="guide_1" src="../../static/img/guide-01.png"/>
				<img class="guide_2" src="../../static/img/guide-02.png"/>
				<img @click="$router.push('/IDoperation/register')" class="guide_3" src="../../static/img/guide-03.png"/>
				<img @click="guide = false" class="guide_4" src="../../static/img/guide-04.png"/>
			</div>
		</div>
  </div>
</template>

<script>
import VueAwesomeSwiper from 'vue-awesome-swiper'
import '../../static/css/swiper.min.css'
import {swiper, swiperSlide} from 'vue-awesome-swiper'
export default {
  name: 'index',
	data: function () {
	  return {
	  	guide: true,
	  	index:0,//公告的序号
	  	count1:0,
	  	count2:0,
	  	count3:0,
	  	count4:0,
	  	count5:0,
	  	count6:0,
	  	noticeList:[],//公告列表
	  	noticePop: false,//公告弹窗开关
	  	imgList: [
/*	  		{
	  			imgPath:'../../static/img/4.png',
	  		},*/
	  		{
	  			imgPath:'../../static/img/1.jpg',
	  		},
//	  		{
//	  			imgPath:'../../static/img/2.jpg',
//	  		},
	  		{
	  			imgPath:'../../static/img/3.jpg',
	  		},
	  	],
　　　　  swiperOption: {
				autoplay: {
				    delay: 3000,
				    stopOnLastSlide: false,
				    disableOnInteraction: false,
				},  //是否自动轮播
//				effect : 'fade',
				loop: true,　　//是否循环轮播
				pagination : {el:'.swiper-pagination',bulletActiveClass: 'my-bullet-active',}, //轮播图中下标点显示
				navigation: {
		      nextEl: '.swiper-button-next',
		      prevEl: '.swiper-button-prev',
		    },
			},
      navList: [
        {
          query: {id:'女装'},
          name: '潮流女装',
          Src: '../static/img/home-01.png'
        },
        {
          query: {id:'男装'},
          name: '时尚男装',
          Src: '../static/img/home-02.png'
        },
        {
          query: {id:'鞋包'},
          name: '鞋子箱包',
          Src: '../static/img/home-03.png'
        },
        {
          query: {id:'百货'},
          name: '日用百货',
          Src: '../static/img/home-04.png'
        },
        {
          query: {id:'母婴'},
          name: '母婴用品',
          Src: '../static/img/home-05.png'
        },
        {
          query: {id:'配饰'},
          name: '珠宝配饰',
          Src: '../static/img/home-06.png'
        },
        {
          query: {id:'电器'},
          name: '数码家电',
          Src: '../static/img/home-07.png'
        },
        {
          query: {id:'家居'},
          name: '家居建材',
          Src: '../static/img/home-08.png'
        },
        {
          query: {id:'美妆'},
          name: '护肤美妆',
          Src: '../static/img/home-09.png'
        },
        {
          query: {id:''},
          name: '全部分类',
          Src: '../static/img/home-10.png'
        }
      ],
      taskList1:[//今日新品
      	{
      		Img:'../../static/img/avatar.jpg',
      		platform:'../../static/img/tb.png',
      		title:'2018新款短袖女装绿色新款短袖女装绿色',
      		price:'108.00',
      		people:'1055'
      	},
      ],
      taskList2:[],//推荐好货
      taskNum: 30,//推荐好货任务数
      taskList3:[],
      taskList4:[],
      taskList5:[],
      taskList6:[],
      taskList7:[],
      taskList8:[],
      taskList9:[],
      taskList10:[],
    }  
	},
	components: {
    swiper,
    swiperSlide
  },
  methods: {
  	showCount:function(){
  		var _this = this;
			_this.$axios.post('/agent/home/public/trialCount').then(function(res){
					var data = res.data;
					if(data.message=="succ"){
						data = data.result;
						_this.count1 = data.count1;
						_this.count2 = data.count2;
						_this.count3 = data.count3;
						_this.count4 = data.count4;
						_this.count5 = data.count5;
						_this.count6 = data.count6;
					}else{
						_this.$alert('2',data.result);
					}
			}).catch(function(error){
				console.log(error);
			});
  	},
  	radom:function(num){
  		return num+1*10+Math.ceil(Math.random()*10)
  	},
  	getCookie: function(name){
			var strcookie = document.cookie;//获取cookie字符串
			var arrcookie = strcookie.split("; ");//分割
			//遍历匹配
			for ( var i = 0; i < arrcookie.length; i++) {
				var arr = arrcookie[i].split("=");
				if (arr[0] == name){
				return arr[1];
				}
			}
			return "";
		},
		setCookie: function (cname, cvalue, exdays) {
		    var d = new Date();
		    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
		    var expires = "expires=" + d.toUTCString();
		    document.cookie = cname + "=" + cvalue + "; " + expires;
		},
  	showTask:function(){
  		var _this = this;
			_this.$axios.post('/agent/home/public/showIndex').then(function(res){
			    var data = res.data;
			    console.log(data);
			    if(data.message=="succ"){
			    	data = data.result;
			    	_this.taskList1=data.list1;
			    	if(data.list2.length%5 != 0){
			    		_this.taskNum = (data.list2.length - data.list2.length%5) + 1;
			    	}
			    		_this.taskList2=data.list2;
//			    	_this.taskList3=data.list3;
//			    	_this.taskList4=data.list4;
//			    	_this.taskList5=data.list5;
//			    	_this.taskList6=data.list6;
//			    	_this.taskList7=data.list7;
//			    	_this.taskList8=data.list8;
//			    	_this.taskList9=data.list9;
//			    	_this.taskList10=data.list10;
			    }else{
			    	_this.$alert("2",data.result);
			    }
			}).catch(function (error) {
			    console.log(error);
			});
		},
		showNotice:function(){
			var _this = this;
			var postData = _this.$qs.stringify({
				status:1,
				startPage:1,
				pageSize:3,
	     })
			_this.$axios.post('/agent/notice/public/show',postData).then(function(res){
					var data = res.data;
					if(data.message=="succ"){
						_this.noticeList = data.result;
					}else{
						_this.$alert('2',data.result);
					}
			}).catch(function(error){
				console.log(error);
			});
		},
		applyTask:function(obj){
			this.$router.push({path:'/home/detail?taskId='+obj})
		},
		getPaltformImg:function(obj){
			if(obj==1){
				return "./../static/img/tb.png";
			}else if(obj==2){
				return "./../static/img/tm.png";
			}else if(obj==3){
				return "./../static/img/jd.png";
			}
		},
		toGoodtype:function(obj){
			this.$router.push({path:'/home/good?id='+obj})
		},
		toNotice:function(obj){
			this.index = obj;
			this.noticePop = true;
		},
		//--------日期转换-----------
		getDate: function(str){  
			if(str == ""||str ==null){
				return "";
			}
		    var oDate = new Date(str),  
		    oYear = oDate.getFullYear(),  
		    oMonth = oDate.getMonth()+1,  
		    oDay = oDate.getDate(),  
		    oHour = oDate.getHours(),  
		    oMin = oDate.getMinutes(),  
		    oSen = oDate.getSeconds(),  
		    oTime = oYear +'-'+ this.getzf(oMonth) +'-'+ this.getzf(oDay) +' '+ this.getzf(oHour) +':'+ this.getzf(oMin) +':'+this.getzf(oSen);//最后拼接时间  
		    return oTime;  
		},
		//补0操作  
		getzf:function(num){  
		    if(parseInt(num) < 10){  
		        num = '0'+num;  
		    }  
		    return num;  
		},
  },
  created: function () {
  	this.setCookie("count1", Number(this.getCookie("count1"))+Math.ceil(Math.random()*3))
  	this.setCookie("count2", Number(this.getCookie("count2"))+Math.ceil(Math.random()*6))
  	this.setCookie("count3", Number(this.getCookie("count3"))+Math.ceil(Math.random()*30))
  	this.setCookie("count4", Number(this.getCookie("count4"))+Math.ceil(Math.random()*45))
  	this.setCookie("count6", Number(this.getCookie("count6"))+Math.ceil(Math.random()*90))
  	this.showTask();
 /* 	this.showCount();*/
  	this.count1 = 2150+Number(this.getCookie("count1"));
  	this.count2 = 5850+Number(this.getCookie("count2"));
  	this.count3 = 22540+Number(this.getCookie("count3"));
  	this.count4 = 33510+Number(this.getCookie("count4"));
  	this.count6 = 65210+Number(this.getCookie("count6"));
  	
  	this.showNotice();
  	
  	var invite = this.$route.query.invite;
		sessionStorage.setItem(`invite`,invite);
		
  }
}
window.onscroll = function () {
  var scrollTop = document.documentElement.scrollTop
//document.querySelector('nav').style.marginTop = scrollTop + 'px'
}
</script>

<style>
.my-bullet-active{
	opacity: 1 !important;
	background: #FFFFFF !important;
}
</style>
<style scoped>
#index{
	width: 1230px;
	margin: 0 auto;
}
.home_1{
	display: flex;
	align-items: flex-end;
}
/*--------侧导航栏--------------*/
.navList a{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 150px;
	height: 40px;
	border-bottom: 1px dashed #e6e6e6;
	background-color: #fff;
	box-sizing: border-box;
	color: #5e5e5e;
}
.navList a:last-child{
	border-bottom: none;
}
.navList a img{
	height: 20px;
	display: block;
	margin-right: 15px;
}
/*----------轮播-----------*/
#banner{
	width: 800px;
	height: 380px;
	background-color: #fff;
	margin: 0 20px;
	position: relative;
}
#banner:hover .swiper-button-next,#banner:hover .swiper-button-prev{
	opacity: 1;
}
.swiper-slide{
	height: 380px;
	display: flex;
	justify-content: center;
	overflow: hidden;
}
.swiper-slide img{
	height: 100%;
	display: block;
}
.swiper-button-next,.swiper-button-prev{
	padding: 10px;
	background-color: rgba(0,0,0,0.2);
	outline: none;
	opacity: 0;
}
.swiper-button-next{
	right: 0;
}
.swiper-button-prev{
	left: 0;
}
/*-------公告等----------*/
#notice{
	width: 240px;
	height: 380px;
	background-color: #fff;
}
.home_1_title{
	padding: 10px 15px;
	box-sizing: border-box;
	font-size: 16px;
	font-weight: bold;
	border-bottom: 1px dashed #E6E6E6;
	color: #4D4D4D;
}
/*--------公告--------*/
.notice ul{
	padding: 10px 15px;
	box-sizing: border-box;
	border-bottom: 1px dashed #E6E6E6;
}
.notice ul li{
	color: #5E5E5E;
	width: 100%;
	height: 30px;
	display: flex;
	align-items: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
}
.notice ul li span{
	width: 6px;
	height: 6px;
	background-color: #5E5E5E;
	border-radius: 50%;
	display: inline-block;
	margin-right: 5px;
}
.notice ul li p{
	display: inline-block;
}
/*-------登录注册----------*/
.tologin{
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 0;
	border-bottom: 1px dashed #E6E6E6;
}
.tologin a{
	width: 80px;
	height: 30px;
	background-color: #ff464e;
	color: #FFFFFF;
	border-radius: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.tologin a:first-child{
	margin-right: 10px;
}
.tologin a img{
	height: 14px;
	display: block;
	margin-right: 5px;
}
/*------------小助手-------------*/
.helper{
	display: flex;
	flex-wrap: wrap;
}
.helper_item{
	color: #9F9F9F;
	width: 50%;
	height: 68px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	cursor: pointer;
}
.helper_item:nth-child(1){
	border-bottom: 1px dashed #E6E6E6;
	border-right: 1px dashed #E6E6E6;
}
.helper_item:nth-child(2){
	border-bottom: 1px dashed #E6E6E6;
}
.helper_item:nth-child(3){
	border-right: 1px dashed #E6E6E6;
}
.helper_item img{
	height: 25px;
	display: block;
	margin-bottom: 5px;
}
/*----------------home_2-------------------*/
.home_2{
	display: flex;
	margin-top: 10px;
	margin-bottom: 20px;
}
.home_2_item{
	width: 300px;
	height: 100px;
	background-color: #fff;
	display: flex;
	align-items: center;
	margin-right: 10px;
	padding: 10px 10px;
	box-sizing: border-box;
	font-size: 14px;
	color: #545454;
}
.home_2_item:last-child{
	margin-right: 0;
}
.home_2_item img{
	height: 70px;
	display: block;
	margin-right: 10px;
}
.home_2_item span{
	font-weight: 600;
	font-size: 26px;
	margin-left: 5px;
}
.home_2_item p:first-child{
	margin-bottom: 8px;
}
.home_2_item:nth-child(1) span{
	color: #6FB8F3;
}
.home_2_item:nth-child(2) span{
	color: #F29E5A;
}
.home_2_item:nth-child(3) span{
	color: #46C780;
}
.home_2_item:nth-child(4) span{
	color: #FF676E;
}
.home_2_item:nth-child(5) span{
	color: #a261f2;
}
/*-----------------home_3---------------------*/
.home_3_title{
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-top: 10px;
	margin-bottom: 10px;
}
.title_l{
	display: flex;
	align-items: flex-end;
}
.title_l p:first-child{
	display: flex;
	align-items: center;
	font-size: 16px;
	font-weight: bold;
}
.title_l p:first-child span{
	width: 3px;
	height: 14px;
	background-color: #4D4D4D;
	margin-right: 5px;
}
.title_l p:last-child{
	color: #9F9F9F;
	height: 17px;
	margin-left: 10px;
}
/*----------单个任务-------------*/
.task_item{
	width: 238px;
	height: 331px;
	background-color: #fff;
	padding: 20px;
	box-sizing: border-box;
	margin-right: 10px;
	margin-bottom: 10px;
	border: 1px solid transparent;
	cursor: pointer;
}
.task_item:hover{
	border: 1px solid #FF464E;
}
.goods_img{
	position: relative;
	width: 100%;
}
.goods_img>img{
	width: 100%;
	display: block;
}
.goods_img .img_box{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	overflow: hidden;
	display: flex;
	align-items: center;
}
.goods_img .img_box img{
	width: 100%;
	display: block;
}
.task_item>img{
	width: 100%;
	display: block;
}
.task_title{
	margin-top: 5px;
	display: flex;
	align-items: flex-end;
}
.task_title img{
	display: block;
	height: 20px;
	margin-right: 5px;
}
.task_title p{
	width: calc(100% - 25px);
	height: 20px;
	line-height: 28px;
	color: #5E5E5E;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.price{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 10px;
}
.price p:first-child{
	color: #FF464E;
	text-decoration: line-through;
}
.price p:last-child{
	color: #5E5E5E;
}
.task_item input{
	margin-top: 10px;
	border: 1px solid #FF464E;
	color: #FF464E;
	width: 100%;
	height: 30px;
	background-color: #fff;
	border-radius: 3px;
	font-size: 14px;
}
/*--------10个任务-------------*/
.task_box_10{
	display: flex;
	flex-wrap: wrap;
}
.task_box_10 .task_item:nth-child(5n){
	margin-right: 0;
}
/*----------8个任务------------*/
.home_3_item{
	display: flex;
	margin-top: 10px;
	margin-bottom: 20px;
}
.task_classify{
	width: 238px;
	height: 672px;
	margin-right: 10px;
	cursor: pointer;
	position: relative;
}
.task_classify>img{
	width: 100%;
	display: block;
}
.task_classify .shade{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 50px;
	background: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.5));
	padding: 10px 20px;
	box-sizing: border-box;
	display: flex;
	justify-content: flex-end;
}
.task_classify .shade img{
	height: 30px;
	display: block;
}
.task_box_8{
	width: 982px;
	display: flex;
	flex-wrap: wrap;
}
.task_box_8 .task_item:nth-child(4n){
	margin-right: 0;
}
/*---------公告弹窗------------*/
#noticePop{
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.5);
	width: 100%;
	height: 100%;
	z-index: 11;
	display: flex;
	align-items: center;
	justify-content: center;
}
.noticePop{
	background-color: #fff;
	border-radius: 5px;
	width: 500px;
	padding-bottom: 20px;
}
.noticePop>p{
	font-size: 14px;
	color: #4F4F4F;
	padding: 10px;
	border-bottom: 1px solid #E6E6E6;
	box-sizing: border-box;
}
.noticePop .notice_content{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 80%;
	margin: 0 auto;
	padding: 10px 0;
}
.noticePop .notice_content h3{
	color: #4F4F4F;
	font-size: 16px;
}
.noticePop .notice_content p{
	color: #9F9F9F;
	margin-top: 10px;
}
.noticePop input{
	width: 140px;
	height: 30px;
	display: block;
	border: none;
	border-radius: 3px;
	background-color: #FF464E;
	color: #FFFFFF;
	margin: 0 auto;
	letter-spacing: 10px;
	padding-left: 10px;
	box-sizing: border-box;
	font-weight: 600;
	margin-top: 15px;
	cursor: pointer;
}
/*-------底部广告条-----------*/
#guide{
	width: 100%;
	height: 105px;
	position: fixed;
	bottom: 0;
	right: 0;
	background-color: rgba(0,0,0,0.6);
	z-index: 11;
	/*animation: close 0.5s linear;*/
}
.guide{
	width: 1200px;
	margin: 0 auto;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
.guide_1{
  width: 14%;
	display: block;
	position: absolute;
	bottom: 0;
	left: 9%;
}
.guide_2{
  width: 36%;
	display: block;
	position: absolute;
	left: 29%;
	top: 17px;
}
.guide_3{
	width: 16%;
	display: block;
	position: absolute;
	left: 72%;
	top: 35px;
	cursor: pointer;
}
.guide_4{
	width: 18px;
	height: 18px;
	display: block;
	position: absolute;
	right: 7%;
	top: 20px;
	cursor: pointer;
}
</style>
